﻿@page "/Grid/Columns/ColumnResize"
@layout DataProviderAccessArea<INwindDataProvider>

<DemoPageSectionComponent Id="Grid-Columns-ColumnResize" ShowSizeMode="true">
    <ChildContentWithParameters Context="Params">
        @inject NwindDataService NwindDataService

        <div class="grid-container">
            <DxGrid Data="@Data" ColumnResizeMode="@CurrentColumnResizeMode" SizeMode="Params.SizeMode"
                TextWrapEnabled="false" ShowAllRows="true">          
                <Columns>
                    <DxGridDataColumn FieldName="ContactName" MinWidth="100" />
                    <DxGridDataColumn FieldName="ContactTitle" MinWidth="100" />
                    <DxGridDataColumn FieldName="CompanyName" MinWidth="100" />
                    <DxGridDataColumn FieldName="City" Width="10%" MinWidth="80" />
                    <DxGridDataColumn FieldName="Country" Width="10%" MinWidth="80" />
                    <DxGridDataColumn FieldName="Phone" Width="15%" MinWidth="80" />
                </Columns>
                <ToolbarTemplate>
                    <DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Contained" SizeMode="Params.SizeMode">
                        <Items>
                            <DxToolbarItem BeginGroup="true" Alignment="ToolbarItemAlignment.Left">
                                <Template Context="toolbar_item_context">
                                    <div class="d-flex flex-row align-items-center">
                                        <div class="me-2">Column Resize Mode:</div>
                                        <DxComboBox Data="GridColumnResizeModes.Keys"
                                            Value="CurrentColumnResizeModeDisplayText"
                                            ValueChanged="@((string value) => ChangeResizeMode(value))" />
                                    </div>
                                </Template>
                            </DxToolbarItem>
                        </Items>
                    </DxToolbar>
                </ToolbarTemplate>
            </DxGrid>
        </div>
    </ChildContentWithParameters>

    @code {
        IEnumerable<Supplier> Data { get; set; }

        GridColumnResizeMode CurrentColumnResizeMode { get; set; } = GridColumnResizeMode.NextColumn;
        string CurrentColumnResizeModeDisplayText { get; set; } = "Next Column";

        Dictionary<string, GridColumnResizeMode> GridColumnResizeModes { get; } = new Dictionary<string,
        GridColumnResizeMode>{
    { "Disabled", GridColumnResizeMode.Disabled },
    { "Next Column", GridColumnResizeMode.NextColumn },
    { "Columns Container", GridColumnResizeMode.ColumnsContainer }
    };

        void ChangeResizeMode(string key)
        {
            CurrentColumnResizeModeDisplayText = key;
            CurrentColumnResizeMode = GridColumnResizeModes[key];
        }

        protected override async Task OnInitializedAsync()
        {
            Data = await NwindDataService.GetSuppliersAsync();
        }
    }
</DemoPageSectionComponent>
